"Menu Hover Effect"
Bootstrap 3.0.0 Snippet by Siddharth Panchal

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html lang="en"> <head> <title>Collapse Navbar</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <div class="fond"> <div class="contener"> <a href="#123"> <div class="volet_1"> <div style="height:100%; position:relative;"> <div style="position:absolute;bottom:0px; height:60px; width:100%;"> <div class="material_txt_deploy">Contact</div> </div> </div> </div> </a> <a href="#123"> <div class="volet_2"> <div style="height:100%; position:relative;"> <div style="position:absolute;bottom:0px; height:60px; width:100%;"> <div class="material_txt_deploy">Page 1</div> </div> </div> </div> </a> <a href="#123"> <div class="volet_3"> <div style="height:100%; position:relative;"> <div style="position:absolute;bottom:0px; height:60px; width:100%;"> <div class="material_txt_deploy">Accueil</div> </div> </div> </div> </a> <div class="volet_4"> <div style="height:100%; position:relative;"> <div style="position:absolute;bottom:0px; height:60px; width:100%;"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/173024/menu_smartphone_btn3.png" class="menu_btn" align="left"/> <div class="material_txt">Material Menu Hover</div> </div> </div> </div> </div> <div align="center"> <div style=" padding:5px; color:#666666; font-weight:300; font-size:30px; font-family:'Roboto';padding-top:70px;">CSS MATERIAL DESIGN <font style="font-weight:400;">MENU HOVER</font></div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
body{background: #f1f1f2;} .text-shadow{text-shadow: 1px 1px 1px #000;} .fond{position:absolute;padding-top:85px;top:0;left:0; right:0;bottom:0;} .contener{position: absolute;top: 0px;width:100%;} .volet_4{background-color: #FD443A;} .volet_1, .volet_2, .volet_3, .volet_4{position: absolute;height: 200px;width: 100%;top: -140px;box-shadow:1px 1px 16px #333333;-webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-ms-transition:all 0.3s ease-in;transition:all 0.3s ease-in;} .contener:hover .volet_1{top: 80px;background-color: #f1f1f2;-webkit-transform:scale(0.85);-moz-transform:scale(0.85);-ms-transform:scale(0.85);transform:scale(0.85);} .contener:hover .volet_2{top: 10px;background-color: #f1f1f2;-webkit-transform:scale(0.90);-moz-transform:scale(0.90);-ms-transform:scale(0.90);transform:scale(0.90);} .contener:hover .volet_3{top: -60px;background-color: #f1f1f2;-webkit-transform:scale(0.95);-moz-transform:scale(0.95);-ms-transform:scale(0.95);transform:scale(0.95);} .menu_btn{cursor: pointer;margin-top: 7px;padding-left: 10px;padding-right: 10px;} .material_txt{line-height: 60px;color: #ffffff;font-size: 20px;font-weight: 400;font-family: 'Roboto';padding-left: 10px;text-shadow: 1px 1px 1px #000;} .material_txt_deploy{line-height: 30px;color: #FD443A;font-size: 30px;font-weight: 400;font-family: 'Roboto';padding-left: 20px;}

Related: See More

Paper Kit 2 PRO Angular
Hover Effect Style
Different types of hover and transition effect.
Sonar Wave Effect in Circle With CSS

Questions / Comments: